<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts</title>

    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/4.11/esri/css/main.css">
    <link rel="stylesheet" href="css/mainApp.css">



    <script src="../dist/config.js"></script>
    <script src="../dist/vendor/zrender.js"></script>
    <script src="http://127.0.0.1/arcgis_js_api/library/4.11/init.js"></script>
    <script>


        // 4.11有问题，坑爹，以后在研究实现方法
        require([
            'dojo/dom-construct',
            "esri/Map",
            "dextra/modules/viewers/MapViewer",
            "dextra/layers/ZRenderLayer",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/geometry/Polyline",  "esri/geometry/Polygon",
            "dojo/domReady!src/heatMapdemo"], function(domConstruct,Map, MapViewer,ZRenderLayer,Graphic, Point,Polyline,Polygon) {




            var zRenderLayer=new ZRenderLayer();
            var myMap = new Map({
                basemap:"dark-gray",
            });
            myMap.add(zRenderLayer);

            var mapViewer = new MapViewer({
                map: myMap,
                viewNode: "viewDiv",
            });

            var view = mapViewer.view;


            view.when(function(){
                var point=  new Point({
                    longitude:102,
                    latitude:24,
                    spatialReference:view.spatialReference
                });

                var line = new Polyline({
                    hasZ: false,
                    paths: [  // first path
                            [-15928253.702174038, 8903385.054654969],
                            [-10331840.239248022, 5459438.308238961],
                            [-9079495.96782402, -2054627.3203050569],
                            [-2739503.093740005, -2250306.112715058],
                            [-1995923.6825820059, -4598451.6216350645]
                    ],
                    spatialReference: view.spatialReference
                });

                const rings = [
                    [  // first ring
                        [-15928253.702174038, 8903385.054654969],
                        [-10331840.239248022, 5459438.308238961],
                        [-1995923.6825820059, -4598451.6216350645] ,
                        [-15928253.702174038, 8903385.054654969],
                    ],
                ];

                var polygon = new Polygon({
                    hasZ: false,
                    rings:rings,
                    spatialReference: view.spatialReference
                });
                console.log(polygon);

                var graphic1=new Graphic({
                    geometry:point,
                    symbol: {
                        type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                        color: [ 255, 255, 0 ],
                        size: 16,  // pixels
                        outline: {  // autocasts as new SimpleLineSymbol()
                            color: [ 255, 255, 0 ],
                            width: 3  // points
                        }
                    }
                });

                var graphic2=new Graphic({
                    geometry:line,
                    symbol: {
                        type: "simple-line",  // autocasts as new SimpleLineSymbol()
                        color: "lightblue",
                        width: 3,
                        style: "short-dot"
                    }
                });

                var graphic3=new Graphic({
                    geometry:polygon,
                    symbol: {
                        type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                        color: [ 51,51, 204, 0.9 ],
                        style: "solid",
                        outline: {  // autocasts as new SimpleLineSymbol()
                            color: "white",
                            width: 1
                        }
                    }
                });
//                mapViewer.addGraphic(graphic2)
//                view.graphics.addMany([graphic1,graphic2,graphic3]);
//                console.log(graphic2)


                zRenderLayer.add(graphic1);
                zRenderLayer.add(graphic2);
                zRenderLayer.add(graphic3);




                setTimeout(function(){
                    graphic1._shape.animate("style",true).when(1000,{
                        fill:"#fff"
                    }).when("2000",{
                        fill:"#F00"
                    }).start();
                },500);





//                    var point=  new Point({
//                        longitude:112,
//                        latitude:24,
//                        spatialReference:view.spatialReference
//                    });

//                    var graphic1=new Graphic({
//                        geometry:point,
//                        symbol: {
//                            type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
//                            color: [ 255, 255, 0 ],
//                            size: 16,  // pixels
//                            outline: {  // autocasts as new SimpleLineSymbol()
//                                color: [ 255, 255, 0 ],
//                                width: 3  // points
//                            }
//                        }
//                    });
//                    zRenderLayer.add(graphic1);

                })
            });




    </script>



</head>
<body>

<div id="viewDiv"></div>
</body>
</html>